import React from 'react';
import styles from './index.less';
import { Card, Input, Button } from 'antd';
import { SwapOutlined } from '@ant-design/icons';

import { getTargetLongitudeAndLatitude, getAllTargetLongitudeAndLatitude } from '../../../pages/Home/api';
import { jkCoordinate, jkAllCoordinate, jkSection, jkAllSection, jkStop, dateFormat, lmdPlanPath, drawGantryCraneAll, lmdPlanPathyx, lmdzt } from '../../../pages/Home/service';


export default class extends React.Component {
  static defaultProps = {
    longmenData: [],
    tBridgeData: [],
    resourceDistributionSelect: {},
    open: false,
    currentIndex: 0,
    itemClick: () => { },
    close: () => { },
  };
  state = {
    speed: '',
    time: '',
    lmdTime: '',
    lmdStartTime: '2021-12-05 08:19:04',
    lmdNowTime: '2021-12-05 08:19:04',
    // lmdStartTime: '2021-12-01 12:19:04',//测试
    // lmdNowTime: '2021-12-01 12:19:04',//测试
    lmdbs: 1
  };

  onChangeSpeed = ({ target: { value } }) => {
    this.setState({ speed:value });
  };
  onChangeLmdTime = ({ target: { value } }) => {
    this.setState({ lmdTime:value, time:value });
  };
  onChangeLmdbs = ({ target: { value } }) => {
    this.setState({ lmdbs:value });
  };
  onChangeTime = ({ target: { value } }) => {
    this.setState({ time:value });
  };
  clickStart = async (id,Jthis,type) => {
    var data = {
      // speed:this.state.speed*1000,
      time:this.state.time,
      truckId:id
    }
    var getTarget = await getTargetLongitudeAndLatitude(data);
    var arr = getTarget.truckPathResult.firstLatLonList.slice(0,getTarget.subscript+1)
    type==1?jkCoordinate(Jthis,arr,this.state.time,this.state.lmdbs):type==2?jkSection(Jthis,arr,this.state.time):jkStop()
  }
  clickStartAll = async (Jthis,type) => {
    if(type == 3){jkStop()}
    var data = {
      // speed:this.state.speed*1000,
      time:this.state.time,
    }
    var arr = []
    var nameArr = []
    var getTarget = await getAllTargetLongitudeAndLatitude(data);
    for(var i=0;i<getTarget.length;i++){
      arr.push(getTarget[i].firstLatLonList.slice(0,getTarget[i].subscript+1))
      nameArr.push(getTarget[i].truckId)
    }
    type==1?jkAllCoordinate(Jthis,arr,nameArr,this.state.time,this.state.lmdbs):type==2?jkAllSection(Jthis,arr,nameArr,this.state.time):jkStop()
  }
  //龙门吊轨迹
  clickLmdPlace = async (Jthis,tp) => {
    const { lmdTime, lmdStartTime, lmdNowTime, lmdbs } = this.state;
    var stime = new Date(lmdStartTime).getTime()
    var ntime = dateFormat("YYYY-mm-dd HH:MM:SS",Number(lmdTime)*1000 + stime )
    tp == 1? lmdPlanPath(Jthis,lmdNowTime):(tp == 2? lmdPlanPathyx(Jthis,lmdNowTime,lmdTime,lmdbs):(tp == 3?lmdzt():null))
    
    if (tp == 1) {
      lmdPlanPath(Jthis,lmdNowTime)
      this.clickStartAll(Jthis,2)
    } else if(tp == 2) {
      lmdPlanPathyx(Jthis,lmdNowTime,lmdTime,lmdbs)
      this.clickStartAll(Jthis,1)
    } else if (tp == 3) {
      lmdzt()
      this.clickStartAll(Jthis,3)
    }
    this.setState({
      lmdNowTime: ntime
    })
  }
  //龙门吊重置
  clickLmdReset= async (Jthis) => {
    const { lmdTime, lmdStartTime, lmdNowTime } = this.state;
    drawGantryCraneAll(Jthis)
    this.setState({
      lmdNowTime: lmdStartTime
    })
  }
  itemClick = (item, i) => {
    this.props.itemClick(item, i);
  };

  close = () => {
    this.props.close();
  };
  componentDidMount = () => {
    const {systemTime} = this.props
    var sysTime = dateFormat("YYYY-mm-dd HH:MM:SS",systemTime)
    if(sysTime){
      this.setState({
        lmdStartTime: sysTime,
        lmdNowTime: sysTime,
      })
    }
  };
  comLabel = (item,Jthis) => {
    const { speed, time, lmdbs } = this.state;
    item = item.length?item[0]:item
    return (
      <Card title="集卡路径" bordered={false} style={{ width: 300 }}>
        
        <p>
          <span className={styles.title}>当前执行路径:</span>
          <span>{item.currRouteNo}</span>
        </p>
        <p>
          <span className={styles.title}>指令类型:</span>
          <span>{item.types}</span>
        </p>
        <p>
          <span className={styles.title}>指令id:</span>
          <span>{item.currRouteNo==1?item.firstWINo:item.secondWINo}</span>
        </p>
        <p>
          <span className={styles.title}>集卡id:</span>
          <span>{item.truckId}</span>
        </p>
        <p>
          <span className={styles.title}>预计到达时间:</span>
          <span>{item.currRouteNo==1?item.firstEndTime:item.secondEndTime}</span>
        </p>

        <hr />
        {/* <p>
          <span className={styles.title}>速度（Km/h）:</span>
          <Input value={speed} onChange={this.onChangeSpeed} />
        </p> */}
        <p>
          <span className={styles.title}>时间/s:</span>
          <Input value={time} onChange={this.onChangeTime} />
        </p>
        <p>
          <span className={styles.title}>倍数:</span>
          <Input value={lmdbs} onChange={this.onChangeLmdbs} />
        </p>
        <Button onClick={()=>this.clickStart(item.truckId,Jthis,1)} style={{marginRight:'20px'}}>运行</Button>
        <Button onClick={()=>this.clickStart(item.truckId,Jthis,3)} style={{marginRight:'20px'}}>停止</Button>
        <Button onClick={()=>this.clickStart(item.truckId,Jthis,2)}>切片</Button>
        
      </Card>
    )
  }
  comLabelAll = (Jthis) => {
    const { speed, time, lmdbs } = this.state;
    return (
      <Card title="集卡路径动态展示" bordered={false} style={{ width: 300 }}>
        {/* <p>
          <span className={styles.title}>速度（Km/h）:</span>
          <Input value={speed} onChange={this.onChangeSpeed} />
        </p> */}
        <p>
          <span className={styles.title}>时间/s:</span>
          <Input value={time} onChange={this.onChangeTime} />
        </p>
        <p>
          <span className={styles.title}>倍数:</span>
          <Input value={lmdbs} onChange={this.onChangeLmdbs} />
        </p>
        <Button onClick={()=>this.clickStartAll(Jthis,1)} style={{marginRight:'20px'}}>运行</Button>
        <Button onClick={()=>this.clickStartAll(Jthis,3)} style={{marginRight:'20px'}}>停止</Button>
        <Button onClick={()=>this.clickStartAll(Jthis,2)}>切片</Button>
        
      </Card>
    )
  }
  longmenLabel = (item) => {
    return (
      <Card title="龙门吊" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>箱号ID:</span>
          <span>{item.containerId}</span>
        </p>
        <p>
          <span className={styles.title}>龙门吊ID:</span>
          <span>{item.gantryID}</span>
        </p>
        <p>
          <span className={styles.title}>经度:</span>
          <span>{item.fence && item.fence.center[0]}</span>
        </p>
        <p>
          <span className={styles.title}>维度:</span>
          <span>{item.fence && item.fence.center[1]}</span>
        </p>
        <p>
          <span className={styles.title}>是否跑大车:</span>
          <span>{item.isBigRun}</span>
        </p>
        <p>
          <span className={styles.title}>是否处理:</span>
          <span>{item.isProcessing}</span>
        </p>
        <p>
          <span className={styles.title}>是否翻箱:</span>
          <span>{item.isTurnOver}</span>
        </p>
        <p>
          <span className={styles.title}>是否装卸船:</span>
          <span>{item.isUnloadOrLoad}</span>
        </p>
        <p>
          <span className={styles.title}>预计开始时间:</span>
          <span>{item.predictStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>预计结束时间:</span>
          <span>{item.predictEndTime}</span>
        </p>
        <p>
          <span className={styles.title}>指令顺序:</span>
          <span>{item.queueId}</span>
        </p>
        <p>
          <span className={styles.title}>指令编号:</span>
          <span>{item.wino}</span>
        </p>
      </Card>
    )
  }
  longmenLabelAll = (Jthis) => {
    const { lmdTime, lmdStartTime, lmdNowTime, lmdbs, speed } = this.state;
    return (
      <Card title="龙门吊" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>初始时间:</span>
          <span>{lmdStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>当前查询时间:</span>
          <span>{lmdNowTime}</span>
        </p>
        <p>
          <span className={styles.title}>时间/s:</span>
          <Input value={lmdTime} onChange={this.onChangeLmdTime} />
        </p>
        {/* <p>
          <span className={styles.title}>集卡速度（Km/h）:</span>
          <Input value={speed} onChange={this.onChangeSpeed} />
        </p> */}
        <p>
          <span className={styles.title}>倍数:</span>
          <Input value={lmdbs} onChange={this.onChangeLmdbs} />
        </p>
        <Button onClick={()=>this.clickLmdPlace(Jthis,2)} style={{marginRight:'20px'}}>运行</Button>
        <Button onClick={()=>this.clickLmdPlace(Jthis,3)} style={{marginRight:'20px'}}>停止</Button>
        <Button onClick={()=>this.clickLmdPlace(Jthis,1)} style={{marginRight:'20px'}}>切片</Button>
        {/* <Button onClick={()=>this.clickLmdReset(Jthis)} style={{marginTop:'10px'}}>重置</Button> */}
      </Card>
    )
  }
  tBridLabel = (item) => {
    console.log(item, 'itemitemitem')
    return (
      <Card title="桥吊" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>箱号ID:</span>
          <span>{item.containerId}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊id:</span>
          <span>{item.craneId}</span>
        </p>
        <p>
          <span className={styles.title}>经度:</span>
          <span>{item.fence && item.fence.center[0]}</span>
        </p>
        <p>
          <span className={styles.title}>维度:</span>
          <span>{item.fence && item.fence.center[1]}</span>
        </p>
        <p>
          <span className={styles.title}>是否处理:</span>
          <span>{item.isProcessing}</span>
        </p>
        <p>
          <span className={styles.title}>是否装卸船:</span>
          <span>{item.isUnloadOrLoad}</span>
        </p>
        <p>
          <span className={styles.title}>后箱指令ID:</span>
          <span>{item.nextWINo}</span>
        </p>
        <p>
          <span className={styles.title}>前箱指令ID:</span>
          <span>{item.preWINo}</span>
        </p>
        <p>
          <span className={styles.title}>预计开始时间:</span>
          <span>{item.predictStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>预计结束时间:</span>
          <span>{item.predictEndTime}</span>
        </p>
        <p>
          <span className={styles.title}>指令顺序:</span>
          <span>{item.queueId}</span>
        </p>
      </Card>
    )
  }
  resourceDistributionModel = (item) => {
    return (
      <Card title="调度指令" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>船舶参考号:</span>
          <span>{item.vesselReference}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊ID:</span>
          <span>{item.powID}</span>
        </p>
        <p>
          <span className={styles.title}>需要集卡数量:</span>
          <span>{item.needTruckNum}</span>
        </p>
        <p>
          <span className={styles.title}>缺少集卡数量:</span>
          <span>{item.lackTruckNum}</span>
        </p>
        <p>
          <span className={styles.title}>正在使用集卡数量:</span>
          <span>{item.usingTruckNum}</span>
        </p>
        <p>
          <span className={styles.title}>分配集卡数量:</span>
          <span>{item.distributionTruckNum}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊是否在重点路上作业:</span>
          <span>{item.isKeyRoad ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>空车集卡分配数量:</span>
          <span>{item.emptyTruckNum}</span>
        </p>
      </Card>
    )
  }
  resourceDistributionJK = (item) => {
    return (
      <Card title="集卡调度结果" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>桥吊id:</span>
          <span>{item.craneId}</span>
        </p>
        <p>
          <span className={styles.title}>龙门吊ID:</span>
          <span>{item.gantryID}</span>
        </p>
        <p>
          <span className={styles.title}>是否预显示:</span>
          <span>{item.isAheadShow ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>集卡是否到达后箱箱区:</span>
          <span>{item.isArrivalNextBlock ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>集卡是否到达前箱箱区:</span>
          <span>{item.isArrivalPreBlock ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>是否后箱改派（换指令）:</span>
          <span>{item.isNextChange ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>后箱是否超车:</span>
          <span>{item.isNextOvertaking ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>是否超车:</span>
          <span>{item.isOvertaking ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>是否前箱改派（换指令）:</span>
          <span>{item.isPreChange ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>前箱是否超车:</span>
          <span>{item.isPreOvertaking ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>是否处理:</span>
          <span>{item.isProcessing ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>后箱指令ID:</span>
          <span>{item.nextWINo}</span>
        </p>
        <p>
          <span className={styles.title}>改派前后箱指令ID:</span>
          <span>{item.preAssignNextWINo}</span>
        </p>
        <p>
          <span className={styles.title}>改派前前箱指令ID:</span>
          <span>{item.preAssignPreWINo}</span>
        </p>
        <p>
          <span className={styles.title}>前箱指令ID:</span>
          <span>{item.preWINo}</span>
        </p>
        <p>
          <span className={styles.title}>后箱到达时间（大概）:</span>
          <span>{item.predictNextArriveBlockTime}</span>
        </p>
        <p>
          <span className={styles.title}>后箱预计开始时间:</span>
          <span>{item.predictNextStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>后箱预计结束时间:</span>
          <span>{item.predictNextEndTime}</span>
        </p>
        <p>
          <span className={styles.title}>前箱到达时间（大概）:</span>
          <span>{item.predictPreArriveBlockTime}</span>
        </p>
        <p>
          <span className={styles.title}>前箱预计开始时间:</span>
          <span>{item.predictPreStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>前箱预计结束时间:</span>
          <span>{item.predictPreEndTime}</span>
        </p>
        <p>
          <span className={styles.title}>指令顺序:</span>
          <span>{item.queueId}</span>
        </p>
        <p>
          <span className={styles.title}>双小箱装箱顺序类型:</span>
          <span>{item.seqType}</span>
        </p>
        <p>
          <span className={styles.title}>集卡ID:</span>
          <span>{item.truckId}</span>
        </p>
        <p>
          <span className={styles.title}>船舶参考号:</span>
          <span>{item.vesselReference}</span>
        </p>
      </Card>
    )
  }
  wiScheduleResultDD = (item) => {
    return (
      <Card title="指令调度结果" bordered={false} style={{ width: 300 }}>
        <p>
          <span className={styles.title}>桥吊id:</span>
          <span>{item.craneId}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊预计开始时间:</span>
          <span>{item.cranePredictStartTime}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊预计结束时间:</span>
          <span>{item.cranePredictEndTime}</span>
        </p>
        <p>
          <span className={styles.title}>桥吊指令顺序:</span>
          <span>{item.craneQueueId}</span>
        </p>
        <p>
          <span className={styles.title}>龙门吊指令顺序:</span>
          <span>{item.gantryQueueId}</span>
        </p>
        <p>
          <span className={styles.title}>是否处理:</span>
          <span>{item.isProcessing ? '是' : '否'}</span>
        </p>
        <p>
          <span className={styles.title}>指令编号:</span>
          <span>{item.wino}</span>
        </p>
      </Card>
    )
  }
  render() {
    const { open, longmenData, tBridgeData, upDateTime, resourceDistributionSelect, comData, truckScheduleResultListSelect, wiScheduleResultListSelect, Jthis, systemTime } = this.props

    return <div className={styles.sidebarWrap} style={{ width: open ? '300px' : '0px' }}>
      <div className={styles.switchBtn} onClick={() => {
        this.close()
      }}>
        <SwapOutlined />
      </div>

      {/* {
        open && !tBridgeData.containerId && !longmenData.containerId && <div className={styles.noData}>暂无数据</div>
      } */}
      {
        upDateTime && open ?
          <div className={styles.timeTitle}>
            <span className={styles.title}>更新时间：</span>
            <span>{upDateTime}</span>
          </div> : null
      }

      <div className={styles.contentBox}>
        <div style={{ height: '50px' }}></div>
        {
          longmenData.length ? this.longmenLabel(longmenData[0])
            : longmenData.ty=='lmd'? (longmenData.ty=='lmd'&&comData.ty=='jk')? null 
            : this.longmenLabelAll(Jthis)
            : null
        }
        {
          tBridgeData.length ? this.tBridLabel(tBridgeData[0])
            : null
        }
        {
          resourceDistributionSelect.powID ? this.resourceDistributionModel(resourceDistributionSelect) : null
        }
        {
          truckScheduleResultListSelect.truckId ? this.resourceDistributionJK(truckScheduleResultListSelect) : null
        }
        {
          wiScheduleResultListSelect.wino ? this.wiScheduleResultDD(wiScheduleResultListSelect) : null
        }
        {
          // comData.truckId ? this.comLabel(comData,Jthis)
          //   : comData.length ? this.comLabel(comData[0],Jthis)
          //   : this.comLabelAll(Jthis)
          comData.ty=='jk'?this.comLabelAll(Jthis):comData.truckId ? this.comLabel(comData,Jthis):comData.length ?this.comLabel(comData,Jthis) : null
        }
      </div>
    </div>
  }
}
